<template>
	<view style="padding-bottom: 200rpx;">
    <z-nav-bar id="nav" bgColor="#ffffff" title="优惠卷"></z-nav-bar>
		<view class="title-btn-receptacle flex-center-between" >
			<view class="flex">
				<view v-for="item in tabList" :key="item.value" class="item" :class="{ active: selectedTab === item.value }" @click="handleTabChange(item.value)">
					{{ item.text }}
					<view v-if="selectedTab == item.value" class="black-line-vessel flex-j-center animated fadeIn faster">
						<view class="black-line"></view>
					</view>
				</view>
			</view>
		</view>
    <view style="height: 100rpx"></view>

		<!-- 可使用 -->
		<view v-if="selectedTab === couponsTypeMap.UNUSED" class="usable-container animated fadeIn fast" >
			<template v-if="couponList.length">
				<view class="coupon-item" v-for="(item,index) in couponList" :key="item.couponId">
					<view class="content flex-a-center" :class="{ active: item.isDesc }">
						<view class="content-left flex-column-center">
              <block v-if="item.couponType!=='COUPON'">
                <view class="num">
                  ￥<text>{{ item.discountAmount }}</text>
                </view>
                <view class="desc">
                  满{{ item.minOrderAmount }}减{{ item.discountAmount }}
                </view>
              </block>
              <block v-else>
                <view class="num">
                  <text>{{ item.discountRate }}</text>折
                </view>
                <view class="desc">
                  满{{ item.minOrderAmount }}享折扣
                </view>
              </block>

						</view>
						<view class="content-right flex-center-between">
							<view class="left">
								<view class="top-txt">{{item.couponName}}</view>
								<view class="txt">
									有效期：{{ item.startDate }} ~ {{ item.endDate }}
								</view>
<!--								<view class="txt flex-a-center">-->
<!--									<text>使用说明</text>-->
<!--									<view v-if="!item.isDesc" @click.stop="item.isDesc = !item.isDesc">-->
<!--										<back :borderColor="'#999'" :isBottom="true"></back>-->
<!--									</view>-->
<!--									<view v-else @click.stop="item.isDesc = !item.isDesc">-->
<!--										<back :borderColor="'#999'" :isTop="true"></back>-->
<!--									</view>-->
<!--								</view>-->
							</view>
<!--							<view @click="onSelect(index)">-->
<!--								<single-select :selectShow="listSelect.indexOf(index)!=-1"></single-select>-->
<!--							</view>-->
						</view>
					</view>
					<view v-if="item.isDesc" class="instruction animated fadeIn faster">
						{{ item.remark }}
					</view>
				</view>
			</template>
			<template v-else>
				<empty-page :txt="'暂无可使用优惠券'" :pic="'http://www.xvopen.com/xiaoV/img1/no-coupon.png'"></empty-page>
			</template>
		</view>
		<!-- 不可使用 -->
		<view v-else-if="selectedTab === couponsTypeMap.UNUSABLE" class="unusable-container  animated fadeIn fast"  >
      <template v-if="couponList.length">
        <view class="coupon-item" v-for="(item,index) in couponList" :key="item.couponId">
          <view class="content flex-a-center" :class="{ active: item.isDesc }">
            <view class="content-left flex-column-center">
              <block v-if="item.couponType!=='COUPON'">
                <view class="num">
                  ￥<text>{{ item.discountAmount }}</text>
                </view>
                <view class="desc">
                  满{{ item.minOrderAmount }}减{{ item.discountAmount }}
                </view>
              </block>
              <block v-else>
                <view class="num">
                  <text>{{ item.discountRate }}</text>折
                </view>
                <view class="desc">
                  满{{ item.minOrderAmount }}享折扣
                </view>
              </block>

            </view>
            <view class="content-right flex-center-between">
              <view class="left">
                <view class="top-txt">{{item.couponName}}</view>
                <view class="txt">
                  有效期：{{ item.startDate }} ~ {{ item.endDate }}
                </view>
                <!--								<view class="txt flex-a-center">-->
                <!--									<text>使用说明</text>-->
                <!--									<view v-if="!item.isDesc" @click.stop="item.isDesc = !item.isDesc">-->
                <!--										<back :borderColor="'#999'" :isBottom="true"></back>-->
                <!--									</view>-->
                <!--									<view v-else @click.stop="item.isDesc = !item.isDesc">-->
                <!--										<back :borderColor="'#999'" :isTop="true"></back>-->
                <!--									</view>-->
                <!--								</view>-->
              </view>
              <!--							<view @click="onSelect(index)">-->
              <!--								<single-select :selectShow="listSelect.indexOf(index)!=-1"></single-select>-->
              <!--							</view>-->
            </view>
          </view>
          <view v-if="item.isDesc" class="instruction animated fadeIn faster">
            {{ item.remark }}
          </view>
        </view>
      </template>
			<template v-else>
				<empty-page :txt="'暂无不可使用优惠券'" :pic="'http://www.xvopen.com/xiaoV/img1/no-coupon.png'"></empty-page>
			</template>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import {customerqryUserCoupon} from '@/api/pagesMy/user'
import {useCustomStores} from '@/utils/hook'
const {userStore} = useCustomStores()
const {userInfo} = userStore
const couponsTypeMap = {
	// 未使用
	UNUSED: 0,
	// 使用
	USED: 2,
	// 不可使用
	UNUSABLE: 1
}
const tabList = ref([
	{ text: '可使用', value:  couponsTypeMap.UNUSED },
	{ text: '不可使用', value: couponsTypeMap.UNUSABLE },
])
const selectedTab = ref(couponsTypeMap.UNUSED)
const couponList = ref([])
const listSelect = ref([])

function handleTabChange(value) {
	if(value !== selectedTab.value) {
		selectedTab.value = value
		loadCouponList()
	}
}


const loadCouponList = async () => {
  customerqryUserCoupon({
    status: selectedTab.value,
    userId: userInfo.userId
  }).then(res => {
    const expandedList = [];
    res.forEach(item => {
      // 根据receiveCount生成多张优惠券
      for (let i = 0; i < (item.receiveCount || 1); i++) {
        expandedList.push({
          ...item,
          uniqueId: `${item.id}_${i}`, // 添加唯一标识
          isReceived: i < item.receiveCount, // 是否已领取
          available: !item.receiveCount || i >= item.receiveCount // 是否可领取
        });
      }
    });
    couponList.value = expandedList;
  })
}

onLoad(() => {
  loadCouponList()
	// loadCouponList()
})
</script>


<style lang="scss">
	@import "./style/common.scss";
	.title-btn-receptacle{
		padding: 0 4rpx;
		position: fixed;
		left: 0;
		z-index: 5;
		.item{
			padding: 18rpx 20rpx 17rpx;
			.black-line{
				width: 88rpx;
			}
		}
	}
	.usable-container,.unusable-container{
		padding: 24rpx;
	}
	.coupon-item{
		color: #999;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		.active{
			box-shadow: 0 8rpx 10rpx 1rpx rgba(214, 214, 214, 0.16);
			position: relative;
			z-index: 1;
			border-radius: 16rpx 16rpx 0 0;
		}
		.content {
			.content-left{
				min-width: 172rpx;
				height: 166rpx;
				background-color: #FFF6F0;
				color: #D22C14;
				.num {
					font-weight: bold;
					text{
						font-size: 60rpx;
					}
				}
				.desc{
					font-size: 21rpx;
				}
			}
			.content-right{
				flex: 1;
				height: 166rpx;
				background-color: #fff;
				padding: 24rpx 32rpx 24rpx 24rpx;
				.top-txt{
					color: #000;
					font-weight: bold;
					margin-bottom: 4rpx;
				}
				.txt{
					font-size: 24rpx;
				}
				.txt:last-child{
					margin-top: 8rpx;
					text{
						margin-right: 4rpx;
					}
				}
			}
		}
		.instruction{
			min-height: 152rpx;
			padding: 36rpx 20rpx 20rpx;
			border-radius: 0 0 16rpx 16rpx;
			background-color: #fff;
			margin-top: -16rpx;
		}
	}
</style>
